<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="../lib/vue2.5.15.js"></script>
    <style>
        #app{
            margin: 0 auto;
            text-align: center;
        }
        #app .content_array .red{
            font-size: 18px;
            color: red;
            font-weight: 600;
        }
        #app .content_array .orange{
            font-size: 18px;
            color: darkorange;
            font-weight: 600;
        }
        #app .content_array .black{
            font-size: 18px;
            color: black;
            font-weight: 600;
        }
        #app .content_array .blue{
            font-size: 18px;
            color: blue;
            font-weight: 600;
        }
        #app .content_array .green{
            font-size: 18px;
            color: green;
            font-weight: 600;
        }

        #app .content_obj .active{
            font-size: 50px;
            color: red;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="content_array">
            <input type="button" value="点击改变字体颜色" @click="switchColor">
            <h1 :class="class1[index]">{{msg}}</h1>
        </div>
        <div class="content_obj">
            <input type="button" value="点击激活" @click="active">
            <h1 :class="{'active':isActive}">{{msg}}</h1>
        </div>
        <div class="content_style">
            <!--<input type="button" value="点击激活" @click="active">-->
            <h3>style的绑定</h3>
            <h1 :style="{'color':color,'fontSize':fontSize}">{{msg}}+内联样式</h1>
            <h1 :style="style">{{msg}}+内联样式</h1>
        </div>

    </div>
</body>
<script>
    const vm = new Vue(
        {
            el:"#app",
            data:{
                msg:"test",
                class1:['red','orange','black','blue','green'],
                index:0,
                isActive:false,
                color:'blue',
                fontSize:'25px',
                style:{
                    color:"red",
                    fontSize:'30px',
                    fontWeight:'800'
                }
            },
            methods:{
                switchColor(){
                    if(this.index==this.class1.length-1){
                        this.index=0
                    }else{
                        this.index++
                    }
                },
                active(){
                    this.isActive = !this.isActive
                }
            },
            computed:{

            }
        }
    )
</script>
</html>